<template>
  <div class="query-container">
    <el-form
      ref="queryFormRef"
      :model="queryParams"
      :inline="true"
      :label-width="labelWidth"
      class="query-form"
    >
      <!-- 基础查询字段 -->
      <template v-for="item in baseItems" :key="item.prop">
        <el-form-item :label="item.label" :prop="item.prop">
          <component
            :is="getComponentType(item.type)"
            v-model="queryParams[item.prop]"
            v-bind="item.attrs || {}"
            v-on="item.listeners || {}"
            clearable
            is-range
            :value-format="item.format?item.format:''"
          >
            <template v-if="item.type === 'select' && item.options">
              <el-option
                v-for="opt in item.options"
                :key="opt.value"
                :label="opt.label"
                :disabled="opt.disabled"
                :value="opt.value"
              />
            </template>
          </component>
        </el-form-item>
      </template>

      <!-- 操作按钮 -->
      <el-form-item class="query-actions">
        <el-button type="primary" @click="handleQuery">
          <el-icon><Search /></el-icon>
          查询
        </el-button>
        <el-button @click="resetQuery">
          <el-icon><Refresh /></el-icon>
          重置
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import {
  Search,
  Refresh
} from '@element-plus/icons-vue'

const props = defineProps({
  // 查询项配置
  items: {
    type: Array,
    required: true
  },
  // 初始查询参数
  initialParams: {
    type: Object,
    default: () => ({})
  },
  // 标签宽度
  labelWidth: {
    type: String,
    default: '80px'
  },
})

const emit = defineEmits(['query', 'reset'])

// 状态
const isAdvanced = ref(false)
const queryFormRef = ref(null)
const queryParams = ref({ ...props.initialParams })

const baseItems = computed(() => {
  return props.items
})


// 方法
const getComponentType = (type) => {
  const componentMap = {
    input: 'el-input',
    select: 'el-select',
    date: 'el-date-picker',
    daterange: 'el-date-picker',
    datetime: 'el-date-picker',
    datetimerange: 'el-date-picker',
    dateTimeRange:'el-time-picker',
  }
  return componentMap[type] || 'el-input'
}

const handleQuery = () => {
  emit('query', queryParams.value)
}

const resetQuery = () => {
  queryFormRef.value?.resetFields()
}

const toggleAdvanced = () => {
  isAdvanced.value = !isAdvanced.value
}

// 暴露方法
defineExpose({
  getFormData: () => queryParams.value,
  resetForm: resetQuery
})
</script>

<style scoped lang="scss">
.query-container {
  padding: 18px 16px 0;
  background-color: #fff;
  margin-bottom: 16px;
  border-radius: 4px;
}

.query-form {
  display: flex;
  flex-wrap: wrap;
}

.query-actions {
  margin-left: auto;
}

.el-form-item {
  margin-right: 16px;
  margin-bottom: 18px;
}
.el-select {
  width: 200px;
}
.el-input {
  width: 200px !important;
}
.el-date-editor {
  width: 200px;
}
</style>